<template>
  <div class="address">
   <top-header :isLeft="true" title="选择地址"></top-header>
   <div class="city_search">
       <a-input placeholder="小区/写字楼/学校" v-model="search_val">
       <a-icon slot="prefix" type="search"></a-icon>
       </a-input>
   </div>
   <div class="area">
       <ul class="area_list" v-for="(item, index) in areaList" :key="index"> 
           <li @click="selectAddress(item)">
               <h4>{{item.name}}</h4>
                 <p>{{item.district}}{{item.address}}</p>
           </li>
       </ul>
   </div>
  </div>
</template>

<script>
import TopHeader from '../components/ToHeader'

export default {
  components: { TopHeader },
data() {
    return {
        city:"",
        search_val:"",
        areaList:[]
    }
},
computed:{
  tempAddress(){
      return this.$store.getters.tempAddress
  }
},

watch:{
    search_val(){
        this.searchPlace();
    }
},
methods: {

  searchPlace(){
    const self=this;
AMap.plugin('AMap.Autocomplete', function(){
  // 实例化Autocomplete
  var autoOptions = {
    //city 限定城市，默认全国
    city: self.city,
  }
  var autoComplete= new AMap.Autocomplete(autoOptions);
  autoComplete.search(self.search_val, function(status, result) {
    // 搜索成功时，result即是对应的匹配数据
    self.areaList=result.tips;
  })
})
  },
  selectAddress(item){
    console.log(item);
     if(item){
       this.tempAddress.address_location=item.district+item.address+item.name;
       this.$router.push({name:"AddAddress"})
     }
  }
},
}

</script>
<style lang="scss" scoped>
.address{
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing:border-box;

}
.city_search{
  background-color: #fff;
  padding:10px 20px;
  color: #333;
}
.area{
  margin-top: 16px;
  background:#fff;
}
.area li{
  border-bottom:1px solid #eee;
  padding:8px 16px;
  color:#aaa;
}
.area li h4{
  font-weight: bold;
  color:#333;
  margin-bottom: 5px;
}
</style>